import { useTodos } from '../hooks/todos'

function TodosFooter () {
  const { data } = useTodos()
  return (
    <footer className='footer'>
      <span className='todo-count'>
        <strong>{data && data.filter(todo => !todo.isCompleted).length}</strong>{' '}
        item left
      </span>
      <ul className='filters'>
        <li>
          <button className='selected'>All</button>
        </li>
        <li>
          <button>Active</button>
        </li>
        <li>
          <button>Completed</button>
        </li>
      </ul>
      <button className='clear-completed'>Clear completed</button>
    </footer>
  )
}

export default TodosFooter
